<template>
	<view class="space_detail bgDefault">
		
		
		<tn-nav-bar fixed alpha customBack class="detail_nav">
		  <view slot="back" class='custom-left' @tap.stop="goBack">
		    <text class='tn-icon tn-icon-left icons'></text>
		    <text class='desc'>社群活动</text>
		  </view>
		  
		  <view slot="right" class='tn-custom-nav-bar__right' style="z-index: 99;" >
		    <text @tap.stop="collectSpace" class='tn-icon tn-icon-like' :class="detail.favor?'tn-icon-like-fill colorFill':''" style="margin-right: 18rpx;"></text>
		    <button class="share_btn" open-type="share" ><i class="tn-icon tn-icon-send"></i></button>
		  </view>
		</tn-nav-bar>
		
		<view >
			<tn-swiper :height="swiperHeight" :list="list"  ></tn-swiper>
		</view>
		
		<view class="space_title tn-radius10">
			
			<view class="title_left">
				<view class="title">{{detail.title}}</view>
				<view class="tap"></view>
			</view>
			
			<view class="title_right" @tap="trunMap()">
				<i class="tn-icon-location-fill icons"></i>
				<view>距离{{distance}}</view>
			</view>
			
			<!-- <view class="info">
				<view class="tn-float-left comments tn-radius10">
					<view class="title">
						<i class="tn-icon-star-fill icons" ></i> {{parseFloat(detail.commentRate).toFixed(1)}} {{rateText(detail.commentRate)}}
						<span>{{detail.commentNumber}}条></span>
					</view>
					<view class="content">
						{{detail.lastComment.activity_content || "暂无评论"}}
					</view>
				</view>
				<view class="tn-float-right address tn-radius10" @tap="trunMap()">
					<span>{{detail.area}}</span>
					<span class="map"><i class="tn-icon-location-fill icons" ></i>地图</span>
					
				</view>
			</view> -->
		</view>
		
		<view class="house tn-radius10">
			<view class="title">
				<span>活动时间</span>
				<span>{{detail.start_time|parseTime('{y}-{m}-{d} {h}:{i}')}}-{{detail.end_time|parseTime('{m}-{d} {h}:{i}')}}</span>
			</view>
			<view class="map">
				<view class="tips">
					<span><span style="color: #010000;">{{detail.user_entry_num}}</span>/{{detail.user_num}}人已参加</span>
					<span style="margin-left: 25rpx;">发布于  {{detail.created_at| parseTime('{m}-{d}')}} {{detail.user.nickname}}</span>
				</view>
			
			</view>
		</view>
		
		<view class="comment tn-radius10">
			<view class="title">
				<span>客户评价</span>
				<span class="more" @tap="commentMore">查看更多>></span>
			</view>
			
			<view class="tips">
				<span class="tj">客户推荐</span>
				<span>近三个月{{detail.lastCommentNumber}}人推荐并好评</span>
			</view>
			
			<view class="number">
				<view>
					<i class="tn-icon-star-fill star"></i>
					<span><span class="starNumber">{{parseFloat(detail.commentRate).toFixed(1)}}</span>{{rateText(detail.commentRate)}}</span>
				</view>
				<!-- <view class=""评分></view> -->
			</view>
			
			<view class="user_comment" v-if="detail.lastComment && detail.lastComment.created_at">
				<view class="userInfo">
					<image mode="aspectFill" class="logo" :src="detail.lastComment.user.avatar"></image>
					<view class="info">
						<view class="nickname">{{detail.lastComment.user.nickname}}</view>
						<view class="desc">
							<span>{{detail.lastComment.created_at| parseTime}}参加</span>
							<span class="star">
								<tn-rate activeColor="#ff0000" v-model="detail.lastComment.activity_star*1" :size="24" :allowHalf="true" :disabled="true"></tn-rate>
							</span>
							<span class="tag tn-radius10">{{rateText(detail.lastComment.activity_star)}}</span>
						</view>
					</view>
				</view>
				<view class="content">
					{{detail.lastComment.activity_content}}
				</view>
			</view>
		</view>
		
		<view class="fujin tn-radius10">
			
			<view class="title">
				<span>活动详情</span>
				<span class="more"></span>
			</view>
			
			<view class="map">
				<zero-markdown-view :markdown="detail.content"></zero-markdown-view>
			</view>
		</view>
		<TemplateLoading :active="loading"></TemplateLoading>
		<view style="margin-top: 140rpx;height: 1rpx;width: 100%;"></view>
		
		<view class="footer tn-flex">
			<view class="price">￥{{parseFloat(detail.price).toFixed(2)}}</view>
			<view class="order-btn tn-radius10" @tap.stop="preOrder()">立即预约</view>
		</view>
	</view>
</template>

<script>
	import {detailObj,getDistance} from '@/api/activity/index.js'
	import TemplateLoading from '../components/loading.vue'
	import {checkLogin} from '@/util/common.js'
	import {subComment} from '@/api/user/index.js'
	import store from '@/store/index.js'
	export default {
		components:{TemplateLoading},
		data() {
			return {
				swiperHeight:523,
				list:[],
				distance:"未知",
				detail:{},
				selectIndex:0,
				id:0,
				price:0,
				loading:false,
			}
		},
		onLoad(e) {
			if(e.id){
				this.id = e.id
				this.initData()
				this.getDistanceObj()
			}
			
			if(e.pid){
				uni.setStorageSync("pid", e.pid)
			}
		},
		onShareAppMessage() {
			
			var pid = 0;
			var userInfo = store.state?.vuex_user
			if(userInfo.token){
				pid = userInfo.token.split("-")[0]
			}
			return {
				title:this.detail.title,
				path:"/pages/activity/detail?id="+this.id+"&pid="+pid,
				imageUrl:this.detail.pic
			}
		},
		methods: {
			getDistanceObj(){
				var _t = this
				uni.getLocation({
					success: function(res) {
						_t.getDistanceO(res.latitude,res.longitude)
					},
					fail(err) {
						console.log(err)
						_t.getDistanceO()
					},
				});
			},
			getDistanceO(lat,lng){
				getDistance({id:this.id,lat:lat,lng:lng}).then(res=>{
					this.distance = res
				})
			},
			
			preOrder(id){
				if(checkLogin("/pages/activity/detail?id="+this.id)){
					uni.navigateTo({
					  url: '/pages/order/confirm/activity?id='+this.id
					}) 
				}
			},
			rateText(rate){
				if(rate > 4.5) return "超预期";
				if(rate > 3.5) return "非常好";
				if(rate > 2) return "一般般";
				return "体验很差";
			},
			goBack(){
				// 返回上一页
				uni.navigateBack({
				    delta: 1
				});
			},
			collectSpace(){
				if(checkLogin()){
					subComment({
						type:1,
						id:this.detail.id
					}).then(res=>{
						uni.showToast({
							icon:"none",
							title:(this.detail.favor == 1?'取消':'收藏') +'成功'
						})
						
						this.detail.favor = this.detail.favor == 1 ?0 : 1
					})
				}
			},
			shareSpace(){
				console.log("##############")
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					summary: this.detail.title || "布芒的家",
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			initData(){
				this.loading = true
				detailObj({id:this.id}).then(res=>{
					this.loading = false
					this.detail = res
					var imgs = res.pics.split(",")
					imgs.map(re=>{
						this.list.push({
							image:re,
							name:""
						})
					})
					
				},err=>{
					this.loading = false
				})
			},
			selectHouse(item,index){
				this.selectIndex = index
				this.price = item.price
			},
			trunMap(){
				uni.navigateTo({
				  url: '/pages/space/map?title='+this.detail.title+'&lat='+this.detail.lat+'&lng='+this.detail.lng
				})
			},
			turnOrder(){
				if(checkLogin()){
					let _id = this.id
					if(this.detail.children.length > 0){
						_id = this.detail.children[this.selectIndex].id
					}
					uni.navigateTo({
					  url: '/pages/order/confirm/space?id='+_id
					})
				}
			},
			commentMore() {
				uni.navigateTo({
					url: '/pages/space/comment?id=' + this.detail.id + '&type=2'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
  .bgDefault{
	  background: $tn-main-bg;
	  height: 100vh;
	 .index_content{
		 padding: 0 7%;
	 }
  }
  
  .detail_nav{
	  color: #fff;
	  color: #fff;
	  font-size: 42rpx;
	  .custom-left{
		  padding-left: 18rpx;
		  width: 231rpx;
		  background: rgba(0, 0, 0, 0.6);
		  border-top-right-radius: 20%;
		  border-bottom-right-radius: 20%;
		  .icons{
			  display: inline;
			  font-size: 27rpx;
		  }
		  .desc{
			  line-height: 32px;
			  margin-left: 34rpx;
		  	padding: 0 18rpx;
		  	border-left: 1px solid #999999;
		  	text-align: center;
		  	font-size: 24rpx;
		  }
	  }
	
  }
  
  
  .tn-radius10{border-radius: 10rpx;}
  
  .space_title{
	  height: 121rpx;
	  background: #fff;
	  width:100%;
	  padding: 30rpx 52rpx;
	  display: flex;
	  justify-content: space-between;
	  
	  .title{font-weight: bold;font-size: 25rpx;color: #333;}
	  .title_right{
	  	color: #aadeed;
	  	font-size: 24rpx;
	  	
	  	.icons{font-size: 50rpx;}
	  }
	  .tap{
		  background: url("https://www.zztengma.com/lihu/bumang/images/activity_lable.jpg") no-repeat  ;
		  background-position: left bottom; 
		  height: 31rpx;
		  background-size: contain;
	  }
	  .info{
		  margin-top: 15rpx;
		  
		  .comments{
			  padding: 15rpx 7rpx;
			  background: #ffc19d;
			  height: 140rpx;
			  width: 29%;
			  .icons{
				  color: #ff0000;
				  display: inline;
			  }
			  
			  .title{
				  display: flex;
				  justify-content: space-between;
				  line-height: 23rpx;
				  font-size: 21rpx;
				  font-weight: bold;
				  color: #000;
				  span{
					  font-size: 15rpx;
					  color: #666;
				  }
			  }
			  
			  .content{
				  margin-top: 10rpx;
				  font-size: 18rpx;
			  }
		  }
		  
		  .address{
			  color: #333;
			  position: relative;
			  padding: 15rpx 7rpx;
			  font-size: 22rpx;
			  background: #ffc19d;
			  height: 140rpx;
			  width: 68%;
			  .icons{
				  color: #ff6708;
				  font-size: 32rpx;
				  display: block;
				  margin-bottom: 7rpx;
			  }
			  
			  .map{
				  color: #ff6708;
				  position: absolute;
				  bottom: 29rpx;
				  right: 37rpx;
				  font-size: 12rpx;
				  font-weight: bold;
				  text-align: center;
			  }
		  }
	  }
  }
  
  .house{
  		margin-top: 19rpx;
  		background: #fff;
		width:100%;
		padding: 30rpx 52rpx;
		height: 165rpx;
		
		.title{
			font-weight: bold;
			font-size: 24rpx;
			display: flex;
			justify-content: space-between;
			padding-bottom: 24rpx;
			border-bottom: 1px solid #d6d6d6;
		}
		
		.map{
			margin-top: 21rpx;
			.tips{
				font-size: 18rpx;
			}
		}
  }
  
  .house_image{
	  width: 281rpx;
	  height: 176rpx;
	  margin-right: 15rpx;
	  
	  image{width: 100%;height: 100%;}
	  .active{border: 5rpx solid $tn-main-orange;}
  }
  
  .fujin{
	margin-top: 19rpx;
	background: #fff;
	width:100%;
	padding: 30rpx 52rpx;
	overflow: hidden;
	
	.title{
		font-weight: bold;
		font-size: 24rpx;
		display: flex;
		justify-content: space-between;
		padding-bottom: 24rpx;
		
		.more{
			color: #666;
			font-size: 18rpx;
		}
	}
  }
  
  .comment {
  		margin-top: 19rpx;
  		background: #fff;
  		width: 100%;
  		padding: 30rpx 52rpx;
  		overflow: hidden;
  
  		.title {
  			font-weight: bold;
  			font-size: 14px;
  			display: flex;
  			justify-content: space-between;
  
  			.more {
  				color: #666;
  				font-size: 12px;
  			}
  		}
  
  		.tips {
  			line-height: 52rpx;
  			font-size: 12px;
  			color: #666;
  
  			.tj {
  				color: $tn-main-orange;
  				margin-right: 29rpx;
  				font-size: 13px;
  			}
  		}
  
  		.number {
  			.star {
  				color: #ff0000;
  				display: inline;
  				font-size: 36rpx;
  				margin-right: 24rpx;
  			}
  
  			span {
  				line-height: 72rpx;
  				font-size: 24rpx;
  
  				.starNumber {
  					font-size: 36rpx;
  				}
  			}
  		}
  
  		.user_comment {
  			margin-bottom: 12px;
  
  			.userInfo {
  				.logo {
  					width: 36px;
  					height: 36px;
  					float: left;
  					border-radius: 50%;
  					margin-right: 17rpx;
  				}
  
  				.info {
  					.nickname {
  						font-size: 14px;
  						color: #333;
  						line-height: 23px;
  					}
  
  					.desc {
  						font-size: 12px;
  						color: #666;
  
  						.star {
  							color: #ff0000;
  							display: inline;
  							font-size: 12px;
  							margin-left: 5rpx;
  							margin-right: 5rpx;
  						}
  
  						.tag {
  							background-color: $tn-main-orange;
  							color: #fff;
  							padding: 1rpx 8rpx;
  							font-size: 12px;
  						}
  					}
  				}
  			}
  
  		}
  
  		.content {
  			font-size: 12px;
  			margin-top: 6px;
  			color: #666;
  			line-height: 18px;
  		}
  	}
    
  
  .footer{
	  padding: 18rpx 55rpx 26rpx;font-size: 36rpx;bottom: 0;width: 100%;
	  display: flex;
	  position: fixed;
	  background: #fff;
	  justify-content: space-between;
	  color: $tn-main-orange;
	  .order-btn{
		  color: #fff;
		  font-size: 32rpx;
		  background: $tn-main-orange;
		  padding: 8rpx 12rpx;
	  }
  }
  .colorFill{color: $tn-main-orange;}
  .share_btn{    background: none;
    line-height: 15px;
	font-size: 21px;
    padding: 0!important 3rpx 3rpx;
    display: inline-block;
	position: sticky;
	color: #FFFFFF;
}
</style>
